<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>
<style>
    body {
        height: 100%;
        /*background-image: url("../../static/assets/img/index_cover.jpg");*/
        background: rgb(100, 100, 100, 0.3);
        z-index: -1;
        /*opacity: 0.5;*/
    }
   .table{
       --bs-table-striped-color: #52324b;
       --bs-table-striped-bg: rgba(215, 135, 135, 0.05);
   }

    .list-group-item:last-child {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    tbody, td, tfoot, th, thead, tr {
        width: 100px;
        height: 80px;
        border-width: 0;
        color: deeppink;
        font-size: 22px;
        font-weight: bold;
    }
    .btn{
        padding: 0.875rem 0.95rem;
        font-size: 1rem;
        border-radius: 1.25rem;
    }
    .btn-primary,.btn-info {
        color: #fff;
        background-color: deeppink;
        border-color: white;

    }
    .btn-primary:hover,.btn-primary:focus,.btn-info:hover {
        color: #fff;
        background-color: #c41971;
        border-color: white;

    }
    .add{
        width:90%;
        height: 50px;
        margin: auto 40px;
        border-radius: 5px;
        font-size: 22px;
    }
    .btn-danger {
        color: deeppink;
        background-color: #fff;
        border-color: deeppink;
    }
    .btn-danger:hover{
        background-color: #fff72c;
    }
    .card{
        /*color: black;*/
        background-color: rgb(250, 167, 189);
        border-radius: 10px;
    }

    .card-title{
        color: deeppink;
        font-size: 38px;
        font-weight: bolder;
    }
</style>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3 text-justify-center">
    <a th:href="@{/back/article/add}" type="button" class="btn btn-primary add">新增文章</a>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>分类标签</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getDate())}">2</td>
            <td th:text="${article.getCategory()}">3</td>
            <td>
                <!--                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">详情</button>-->

                <!--                &lt;!&ndash; 模态框显示文章详情 &ndash;&gt;-->
                <!--                <div class="modal fade" id="myModal">-->
                <!--                    <div class="modal-dialog">-->
                <!--                        <div class="modal-content">-->

                <!--                            &lt;!&ndash; 模态框头部 &ndash;&gt;-->
                <!--                            <div class="modal-header">-->
                <!--                                <h4 class="modal-title" th:text="${article.getTitle()}">模态框标题</h4>-->
                <!--                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>-->
                <!--                            </div>-->

                <!--                            &lt;!&ndash; 模态框内容 &ndash;&gt;-->
                <!--                            <div class="modal-body" th:text="${article.getContent()}">-->
                <!--                                模态框内容..-->
                <!--                            </div>-->

                <!--                            &lt;!&ndash; 模态框底部 &ndash;&gt;-->
                <!--                            <div class="modal-footer">-->
                <!--                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>-->
                <!--                            </div>-->

                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->

                <a class="btn btn-info" href="#" th:title="${article.getTitle()}" data-bs-toggle="popover" data-bs-trigger="focus" th:data-bs-content="${article.getContent()}">详情</a>
                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>
                <button type="button" class="btn btn-danger" th:onclick="deleteArtcile([[${article.getId()}]])">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
<script>
    function deleteArtcile(id){
        if (confirm("确认删除？")){
            location.replace(location.protocol+"//"+location.host+"/back/article/delete/"+id);
        }
    }

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>
</html>